<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div style="margin-bottom: 20px">试题录入</div>
        <el-divider></el-divider>
        <div style="padding: 0px 20px 20px 60px">
          <el-form
            label-width="100px"
            ref="form"
            :rules="rules"
            :model="formDate"
          >
            <el-form-item label="学科:" prop="subjectID">
              <el-select
                v-model="formDate.subjectID"
                @change="changeSubject"
                style="width: 400px"
                size="small"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录:" prop="catalogID">
              <el-select
                v-model="formDate.catalogID"
                style="width: 400px"
                size="small"
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业:" prop="enterpriseID">
              <el-select
                v-model="formDate.enterpriseID"
                style="width: 400px"
                size="small"
              >
                <el-option
                  v-for="item in enterpriseList"
                  :key="item.value"
                  :label="item.company"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市:" prop="province">
              <el-select
                v-model="formDate.province"
                @change="provinceChange"
                style="width: 198px; margin-right: 4px"
                size="small"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="formDate.city"
                style="width: 198px"
                size="small"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向:" prop="direction">
              <el-select
                v-model="formDate.direction"
                style="width: 400px"
                size="small"
              >
                <el-option
                  v-for="item in directionList"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型:" prop="questionType">
              <el-radio-group
                v-model="formDate.questionType"
                @change="typeRadioChange"
              >
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度:" prop="difficulty">
              <el-radio-group v-model="formDate.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干:" prop="question">
              <quill-editor
                v-model="formDate.question"
              ></quill-editor>
            </el-form-item>

            <el-form-item label="选项:" v-if="radioCheckboxBox">
              <div class="option-time">
                <el-radio
                  v-if="radio"
                  style="margin-right: 5px"
                  >A:</el-radio
                >
                <el-checkbox
                  v-else-if="checkbox"
                  style="margin-right: 5px"
                  >A:</el-checkbox
                >
                <el-input style="width: 240px" ></el-input>
                <div class="avatar-uploader" style="margin-left: 4px">
                  <div class="el-upload">
                    <span>上传图片</span>
                    <i class="el-icon-circle-close"></i>
                    <el-input  type="file" name="file" class="el-upload__input" />
                  </div>
                </div>
              </div>

              <el-button type="danger" size="small" :disabled="disabled"
                >+增加选项与答案</el-button
              >
            </el-form-item>

            <el-form-item label="解析视频:" prop="videoURL">
              <el-input
                v-model="formDate.videoURL"
                style="width: 400px"
              ></el-input>
            </el-form-item>
            <el-form-item label="答案解析:" prop="answer">
              <quill-editor
                v-model="formDate.answer"
              ></quill-editor>
            </el-form-item>
            <el-form-item label="题目备注：">
              <div style="width: 400px">
                <el-input
                  v-model="formDate.remarks"
                  type="textarea"
                  rows="4"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="试题标签：">
              <!-- <el-select v-model="formDate.tags"  allow-create filterable default-first-option style="width:400px" size="small" placeholder="请选择试题标签"></el-select> -->
              <el-select
                v-model="formDate.tags"
                 multiple
                filterable
                allow-create
                default-first-option
                style="width: 400px"
                size="small"
                placeholder="请选择试题标签"
              >
              </el-select>
            </el-form-item>
            <el-form-item v-if="$route.query.id">
              <el-button type="success" @click="submit">确定修改</el-button>
            </el-form-item>
            <el-form-item v-else>
              <el-button type="primary" @click="submit">确定提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { list } from '@/api/hmmm/companys'
import { simple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction } from '@/api/hmmm/constants'
import { add, detail, update } from '@/api/hmmm/questions'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      subjectList: [],
      directoryList: [],
      enterpriseList: [],
      provinceList: provinces(),
      cityList: [],
      directionList: direction,
      formDate: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 区县
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        videoURL: '', // 视频解析
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 试题标签
        options: []
        // 单选多选框数组
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        city: [{ required: true, message: '请选择区县', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' }
        ],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ]
      },
      disabled: true,
      radio: true,
      checkbox: false,
      radioCheckboxBox: true
    }
  },
  created () {
    if (this.$route.query.id) {
      this.getQuestion()
    }
    this.subjectListFn()
    this.enterpriselist()
  },
  methods: {
    // 获取学科
    async subjectListFn () {
      const result1 = await simple()
      this.subjectList = result1.data
    },
    // change事件当学科发生变化
    async changeSubject () {
      // 获取目录
      const result2 = await directorysSimple({
        subjectID: this.formDate.subjectID
      })
      this.directoryList = result2.data
    },
    // 企业
    async enterpriselist () {
      const { data } = await list()
      this.enterpriseList = data.items
    },
    // 获取区县
    provinceChange () {
      this.cityList = citys(this.formDate.province)
    },
    // 点击多选，按钮可增加
    typeRadioChange (val) {
      console.log(val)
      if (val === '1') {
        this.radio = true
        this.radioCheckboxBox = true
      } else if (val === '2') {
        this.checkbox = true
        this.radio = false
        this.disabled = false
        this.radioCheckboxBox = true
      } else if (val === '3') {
        this.radioCheckboxBox = false
      }
    },
    // 提交表单
    submit () {
      this.$refs.form.validate(async (isOk) => {
        if (isOk) {
          // console.log(isOk)
          if (this.$route.query.id) {
            await update(this.formDate)
            this.$message.success('修改成功')
          } else {
            await add(this.formDate)
            this.$message.success('添加成功')
          }
          this.$refs.form.resetFields()
          this.$router.push('/questions/list')
        }
      })
    },
    // 获取详情赋值
    async getQuestion () {
      const { data } = await detail({ id: this.$route.query.id })
      this.formDate = data
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.option-time {
  margin-top: 15px;
  padding-bottom: 20px;
}
.avatar-uploader {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
.avatar-uploader i {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  background: #fff;
  font-size: 18px;
  color: #999;
}
.el-upload__input {
  display: none !important;
}
</style>
